<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>计划功能</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
          </div>
          <div class="function-body">
            <el-tabs tab-position="left">
              <el-tab-pane :label="o.name" v-for="o, index in functionList" :key="index">{{ o.content }}</el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>其他</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
          </div>
          <div class="function-body">
            还没想好写啥
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      // 版本号
      version: "3.4.0",
      functionList: [
        {
          name: "在线聊天",
          content: "基于websocket实现在线聊天"
        },
        {
          name: "sso",
          content: "单点登录系统：基于auth2实现sso中心"
        },
        {
          name: "笔记系统",
          content: "开发一个笔记系统,要有app端和web端"
        },
        {
          name: "流程相关",
          content: "完善流程相关的功能"
        },
        {
          name: "学习",
          content: "redis界面控制或者相应业务，kafka界面控制或者相应业务，elasticsearch界面控制或者相应业务"
        }
      ]
    };
  },
  methods: {

  },
};
</script>

<style scoped lang="scss">
.function-body li {
  height: 2em;
  line-height: 2em;
}
</style>
